<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}万元</h2>
    <button @click="changePrice">修改汽车的价钱</button>
  </div>
  <h2>游戏列表：</h2>
  <ul>
    <li v-for="game in games" :key="game.id">{{ game.name }}</li>
  </ul>
  <button @click="changeFirstGame">修改第一个游戏的名字</button>
</template>
<script setup lang="ts">
import {reactive} from "vue";
// 通过添加reactive将对象/数组变为响应式数据
let car = reactive({brand: '奔驰', price: 100})
let games =reactive([{
  id: '1',
  name: '王者荣耀'
}, {
  id: '2',
  name: '原神'
},])

function changePrice() {
  car.price += 10
}

function changeFirstGame() {
  games[0].name = '金铲铲'
}
</script>
<style scoped>
.person {
  background-color: #e7abab;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>